import React from 'react';
import {
  Form,
  Input,
  Modal,
  Card,
  Select,
  DatePicker,
  Row,
  Col,
  Radio,
  Checkbox
} from 'antd';
import { LwjUpload } from 'components';
import { LwjArea }  from 'components';
import { validateMobile,validatorCharacters } from 'utils/utils';

const FormItem = Form.Item
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 8,
      offset: 2,
    },
    sm: {
      span: 8,
      offset: 2,
    },
  },
}
const addNeedDesignContractForm = ({
  dispatch,
  onOk,
  isDesignNeeded,
  currentContractDetail,
  currentOrderDetail,
  isUpdate,
  currentUserRole,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll,
    onFieldsChange
  },
  ...updateModalProps
}) => {
  const handleSubmit = () => {
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.orderContractAt = values.orderContractAt.valueOf();
        values.installContractAt = values.installContractAt.valueOf();
        values.measuredAt = values.measuredAt.valueOf();
        if (values.orderContractAt > values.measuredAt) {
          Modal.info({ title: '合同签订时间不能大于合同测量时间' });
          return;
        }
        if (values.measuredAt > values.installContractAt) {
          Modal.info({ title: '合同测量时间不能大于合同安装时间' });
          return;
        }
        values.contractOrderType = "CUSTOMIZE";
        values.designNeeded = isDesignNeeded;
        if (isUpdate) {
          values.id = currentContractDetail.id;
          values.version = currentContractDetail.version;
        }
        // 组装收货人地址数据
        values.consigneeProvince = values.consigneeRegion[0];
        values.consigneeCity = values.consigneeRegion[1];
        values.consigneeDistrict = values.consigneeRegion[2];
        delete values.consigneeRegion;
        onOk(values);
      }
    });
  };

  const modalOpts = {
    ...updateModalProps,
    onOk: handleSubmit
  }

  const xlsProps = {
    target: '/services/upload/order',
    uploadIcon: 'upload',
    accept:'image/*',
    fileType: '',
    onChange(value) {
    },
    showUploadList: true
  }

  return (
    <Modal {...modalOpts}>
      <Card bordered={false}>
        <Form onSubmit={handleSubmit} hideRequiredMark>
          <Row>
            <Col span={12}>
              <FormItem {...formItemLayout} label="产品类型">
                {getFieldDecorator('productType', {
                  rules: [
                    {
                      required: true,
                      message: '请选择产品类型',
                      whitespace: true
                    }
                  ],
                  initialValue: currentContractDetail.productType
                })(
                  <Select>
                    <Option value="CUPBOARD">橱柜</Option>
                    <Option value="WARDROBE">衣柜</Option>
                  </Select>
                )}
              </FormItem>
              {isUpdate && <FormItem {...formItemLayout} label="合同号">
                {getFieldDecorator('contractNum', {
                  rules: [
                    {
                      required: true,
                      message: '请输入合同号',
                      whitespace: true
                    }
                  ],
                  initialValue: currentContractDetail.contractNum
                })(<Input disabled placeholder="请输入合同号" />)}
              </FormItem>}
              <FormItem {...formItemLayout} label="合同签订时间">
                {getFieldDecorator('orderContractAt', {
                  rules: [
                    {
                      required: true,
                      message: '请选择合同下单时间',
                      type: 'object'
                    }
                  ],
                  initialValue: currentContractDetail.orderContractAt
                })(<DatePicker style={{
                  width: '100%'
                }} />)}
              </FormItem>
              <FormItem {...formItemLayout} label="测量时间">
                {getFieldDecorator('measuredAt', {
                  rules: [
                    {
                      required: true,
                      message: '请选择测量时间',
                      type: 'object'
                    }
                  ],
                  initialValue: currentContractDetail.measuredAt
                })(<DatePicker style={{
                  width: '100%'
                }} />)}
              </FormItem>
              <FormItem {...formItemLayout} label="合同安装时间">
                {getFieldDecorator('installContractAt', {
                  rules: [
                    {
                      required: true,
                      message: '请选择合同安装时间',
                      type: 'object'
                    }
                  ],
                  initialValue: currentContractDetail.installContractAt
                })(<DatePicker style={{
                  width: '100%'
                }} />)}
              </FormItem>
              <FormItem {...formItemLayout} label="测量设计师姓名">
                {getFieldDecorator('measureDesignerName', {
                  rules: [
                    {
                      required: true,
                      message: '请输入测量设计师姓名',
                      whitespace: true
                    }
                  ],
                  initialValue: currentContractDetail.measureDesignerName
                })(<Input placeholder="请输入测量设计师姓名" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="测量设计师电话">
                {getFieldDecorator('measureDesignerPhoneNum', {
                  rules: [
                    {
                      required: true,
                      message: '请输入测量设计师电话',
                      whitespace: true
                    }, {
                      validator: validateMobile
                    }
                  ],
                  initialValue: currentContractDetail.measureDesignerPhoneNum
                })(<Input placeholder="请输入测量设计师电话" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="测量图纸">
                {getFieldDecorator('measuredPictureAttachment', {
                  rules: [
                    {
                      required: true,
                      message: '请上传测量图纸',
                    }
                  ],
                  initialValue: currentContractDetail.measuredPictureAttachment
                })(<LwjUpload multiple={true} {...xlsProps} fileLists={currentContractDetail.measuredPictureAttachment} />)}
              </FormItem>
              <FormItem {...formItemLayout} label="现场图片">
                {getFieldDecorator('scenePictureAttachment', {
                  rules: [
                    {
                      required: true,
                      message: '请上传现场图片',
                    }
                  ],
                  initialValue: currentContractDetail.scenePictureAttachment
                })(<LwjUpload multiple={true} {...xlsProps} fileLists={currentContractDetail.scenePictureAttachment} />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout} label="客户姓名">
                {getFieldDecorator('customerName', {
                  rules: [
                    {
                      required: true,
                      message: '客户姓名不能为空',
                      whitespace: true
                    },
                    {
                      max:5,
                      message: '客户姓名长度不能大于5',
                      whitespace: true
                    }
                    ,{
                      validator:validatorCharacters
                    }
                  ],
                  initialValue: isUpdate ? currentContractDetail.customerName : currentOrderDetail.customerName
                })(<Input disabled placeholder="请输入客户姓名" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="客户手机号">
                {getFieldDecorator('customerPhoneNum', {
                  rules: [
                    {
                      required: true,
                      message: '请输入客户手机号',
                      whitespace: true
                    }, {
                      validator: validateMobile
                    }
                  ],
                  initialValue: isUpdate ? currentContractDetail.customerPhoneNum : currentOrderDetail.customerPhoneNum
                })(<Input disabled placeholder="请输入客户手机号" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="收货人姓名">
                {getFieldDecorator('consigneeName', {
                  rules: [
                    {
                      required: true,
                      message: '收货人姓名不能为空',
                      whitespace: true
                    },
                    {
                      max:5,
                      message: '收货人姓名长度不能大于5',
                      whitespace: true
                    }
                    ,{
                      validator:validatorCharacters
                    }
                  ],
                  initialValue: isUpdate ? currentContractDetail.consigneeName : currentOrderDetail.consigneeName
                })(<Input placeholder="请输入收货人姓名" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="收货人手机号">
                {getFieldDecorator('consigneePhoneNum', {
                  rules: [
                    {
                      required: true,
                      message: '请输入正确的收货人手机号',
                      whitespace: true
                    }, {
                      validator: validateMobile
                    }
                  ],
                  initialValue: isUpdate ? currentContractDetail.consigneePhoneNum : currentOrderDetail.consigneePhoneNum
                })(<Input placeholder="请输入收货人手机号" />)}
              </FormItem>
              {(!_.isEmpty(currentContractDetail.consigneeRegion) || !isUpdate) && <FormItem {...formItemLayout} label="收货人地址">
                {getFieldDecorator('consigneeRegion', {
                  rules: [
                    {
                      required: true,
                      message: '请选择收货人地址',
                      type: 'array'
                    }
                  ],
                  initialValue: isUpdate ? currentContractDetail.consigneeRegion : currentOrderDetail.consigneeRegion
                })(<LwjArea width={'100%'} />)}
              </FormItem>}
              <FormItem {...formItemLayout} label="收货人详细地址">
                {getFieldDecorator('consigneeAddress', {
                  rules: [
                    {
                      required: true,
                      message: '请输入收货人详细地址',
                      whitespace: true
                    }
                  ],
                  initialValue: isUpdate ? currentContractDetail.consigneeAddress : currentOrderDetail.consigneeAddress
                })(<Input placeholder="请输入收货人详细地址" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="合同类型">
              {getFieldDecorator('contractType', {
                rules: [
                  {
                    required: true,
                    message: '请选择合同单类型'
                  }
                ],
                initialValue:currentContractDetail.contractType
              })(
                <Radio.Group  disabled={!_.isEmpty(currentContractDetail.contractType)} >
                  <Radio.Button value="NORMAL">正常合同</Radio.Button>
                  <Radio.Button value="SAMPLE">样品合同</Radio.Button>
                  <Radio.Button value="SUPPLEMENT">增补合同</Radio.Button>
                </Radio.Group>
              )}
            </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
    </Modal>
  )
}

export default Form.create()(addNeedDesignContractForm);
